package com.csw.compose.ui.module.component.advanced

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ExperimentalLayoutApi
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Button
import androidx.compose.material3.DatePicker
import androidx.compose.material3.DatePickerDialog
import androidx.compose.material3.DateRangePicker
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.material3.rememberDatePickerState
import androidx.compose.material3.rememberDateRangePickerState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.csw.compose.theme.pagePadding
import com.csw.compose.ui.Destination
import com.csw.compose.ui.components.BodyText
import com.csw.compose.ui.components.LabelText
import com.csw.compose.ui.components.MiniSpacer
import com.csw.compose.ui.components.NormalSpacer
import com.csw.compose.ui.components.PrimaryTitle
import com.csw.compose.ui.components.UlItem
import com.csw.compose.ui.module.BasePage
import java.text.SimpleDateFormat
import java.util.Date
import java.util.Locale

@Preview(heightDp = 1600)
@Composable
fun DatePickerPagePreview() {
    BasePage({}, "日期选择器（DatePicker）") {
        DatePickerPage()
    }
}

class DatePickerPageData {
    companion object : Destination("DatePickerPage")
}

/**
 * [参考](https://developer.android.google.cn/develop/ui/compose/components/datepickers?hl=zh-cn)
 */
@OptIn(ExperimentalLayoutApi::class, ExperimentalMaterial3Api::class)
@Composable
fun DatePickerPage() {
    Column(
        modifier = Modifier
            .padding(horizontal = pagePadding)
            .verticalScroll(rememberScrollState())
    ) {
        PrimaryTitle("简介")
        BodyText("在应用中快速实现日期选择功能，提供了嵌入页面的选择器组件，也支持通过对话框选择")

        NormalSpacer()
        val datePickerState = rememberDatePickerState()
        val dateFormat = SimpleDateFormat("yyyy-MM-dd", Locale.getDefault())
        val selectedDate = datePickerState.selectedDateMillis?.let {
            dateFormat.format(Date(it))
        }
        OutlinedTextField(
            selectedDate.orEmpty(),
            {},
            label = {
                Text("Selected date")
            },
            modifier = Modifier.fillMaxWidth()
        )
        DatePicker(datePickerState)
        UlItem("DatePicker")
        LabelText("嵌入式日期选择器")

        NormalSpacer()
        val openDialog = remember { mutableStateOf(false) }
        Button({
            openDialog.value = true
        }) {
            Text("通过对话框选择日期")
        }
        if (openDialog.value) {
            DatePickerDialog(
                { openDialog.value = false },
                confirmButton = {
                    Button({ openDialog.value = false }) {
                        Text("确定")
                    }
                },
                dismissButton = {
                    Button({
                        openDialog.value = false
                    }) {
                        Text("取消")
                    }
                }
            ) {
                DatePicker(datePickerState)
            }
        }
        UlItem("DatePickerDialog")
        LabelText("在对话框中显示日期选择组件")

        NormalSpacer()
        val dateRangePickerState = rememberDateRangePickerState()
        val startDate = dateRangePickerState.selectedStartDateMillis?.let {
            dateFormat.format(Date(it))
        }
        val endDate = dateRangePickerState.selectedEndDateMillis?.let {
            dateFormat.format(Date(it))
        }
        Row(modifier = Modifier.fillMaxWidth()) {
            OutlinedTextField(
                startDate.orEmpty(),
                {},
                label = {
                    Text("Start date")
                },
                modifier = Modifier.weight(0.5f)
            )
            MiniSpacer()
            OutlinedTextField(
                endDate.orEmpty(),
                {},
                label = {
                    Text("End date")
                },
                modifier = Modifier.weight(0.5f)
            )
        }
        Box(modifier = Modifier.height(460.dp)) {
            DateRangePicker(
                state = dateRangePickerState,
            )
        }
        UlItem("DateRangePicker")
        LabelText("日期段选")
    }
}
